<template>
  <DialogCard :title="title" :width="width" :height="height" @close="close">
    <template v-slot:content>
      <div class="content">
        <div class="content-item">
          <div class="item-title">设备名称</div>
          <el-select
            class="select"
            popper-class="confirmadd_el-select-dropdown"
            v-model="deviceName"
            filterable
            placeholder="请输入设备名称"
            clearable>
            <el-option
              v-for="item in deviceList"
              :key="item.id"
              :label="item.deviceName"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="content-item">
          <div class="item-title">设备类型</div>
          <el-select
            class="select"
            popper-class="confirmadd_el-select-dropdown"
            v-model="deviceType"
            placeholder="请选择设备类型"
            clearable>
            <el-option
              v-for="item in deviceOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="content-item">
          <div class="item-title">同步时间</div>
          <!-- <el-input class="ipt" placeholder="请选择同步时间"></el-input> -->
          <el-date-picker
            popper-class="timePicker"
            prefix-icon=""
            v-model="deviceTime"
            style="width: 300px"
            type="datetime"
            placeholder="请选择同步时间"
            clearable />
        </div>
        <div class="content-item">
          <div class="item-title">设备经度</div>
          <el-input
            v-model="longitude"
            class="ipt"
            placeholder="请输入设备经度"
            clearable></el-input>
        </div>
        <div class="content-item">
          <div class="item-title">设备纬度</div>
          <el-input
            v-model="latitude"
            class="ipt"
            placeholder="请输入设备纬度"
            clearable></el-input>
        </div>
        <div class="content-item">
          <div class="item-title">设备状态</div>
          <el-select
            class="select"
            popper-class="confirmadd_el-select-dropdown"
            v-model="deviceStatus"
            placeholder="请选择设备状态"
            clearable>
            <el-option
              v-for="item in deviceOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="content-btn" @click="onConfirm">确认修改</div>
      </div>
    </template>
  </DialogCard>
</template>

<script setup>
  import { ref, onMounted, toRefs } from 'vue'
  import { getDeviceList } from '@/api/home.js'
  import DialogCard from '@/components/home/dialog/dialogCard.vue'
  const props = defineProps({ title: String, width: Number, height: Number, deviceList: Array })
  const { title, width, height, deviceList } = toRefs(props)

  const emit = defineEmits(['closeDialog'])

  const deviceName = ref('')
  const deviceType = ref('')
  const deviceTime = ref('')
  const longitude = ref('')
  const latitude = ref('')
  const deviceStatus = ref('')

  let deviceOptions = [
    {
      name: '全部',
      value: 0,
    },
    {
      name: '定位',
      value: 1,
    },
    {
      name: '测向',
      value: 2,
    },
    {
      name: '解码',
      value: 3,
    },
    {
      name: '民航',
      value: 4,
    },
  ]

  const close = () => {
    emit('closeDialog', 'defense')
  }

  const onConfirm = () => {
    console.log(deviceList.value)
  }
</script>

<style scoped lang="scss">
  .content {
    padding-top: 10px;
    .content-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 10px;
      margin: 15px 0;
      .item-title {
        font-size: 15px;
        color: #ffffff;
      }
      .select {
        width: 300px;
      }
      .ipt {
        width: 300px;
        color: #ffffff;
      }
    }
    .content-btn {
      width: 89px;
      height: 31px;
      background: linear-gradient(90deg, #21a4d7 0%, #1550ab 100%);
      border: 1px solid #80ebfd;
      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.7);
      color: #ffffff;
      line-height: 31px;
      text-align: center;
      margin: 0 auto;
      margin-top: 50px;
    }
  }
  :deep(.el-input__wrapper) {
    background-color: transparent !important;
    box-shadow: 0 0 0 1px #2790c8 inset;
  }
  :deep(.el-input__inner) {
    color: #a8abb2;
    border: none;
    border-radius: 0px;
    border-color: transparent;
    background-color: transparent;
  }
  :deep(.el-select .el-input__wrapper, .el-input__wrapper) {
    background-color: transparent;
    color: #fff;
    border: 1px solid #2daef1;
    box-shadow: none;
  }
  :deep(.el-select .el-input__inner) {
    color: #ffffff;
  }
  :deep(.el-select__placeholder) {
    color: #a8abb2;
  }
</style>
<style lang="scss">
  .timePicker {
    border: none !important;
    :deep(.el-picker-panel) {
      border: 1px solid #2daef1;
    }
    .el-input__wrapper {
      background-color: transparent !important;
      box-shadow: 0 0 0 1px #2790c8 inset;
    }
    .el-picker-panel,
    .el-picker-panel__footer {
      border: 1px solid #408fd6;
    }
    .el-picker-panel .el-time-panel {
      background-color: #12385b !important;
      box-shadow: 0 0 0 1px #2790c8 inset;
      border: none;
    }
    .el-time-spinner__item.is-active:not(.is-disabled) {
      color: #fff;
    }
    .el-popper__arrow:before {
      background-color: #12385b !important;
      border-color: #12385b !important;
    }
    .el-button.is-plain {
      background-color: #408fd6;
      border: 1px solid #408fd6;
      color: #fff;
    }
  }
</style>
